<template>
  <div style="margin-top: 20px;">
    <el-timeline style="max-width: 600px">
      <el-timeline-item v-for="(activity, index) in activities" :key="index" placement="top"
        :timestamp="activity.finishTime" :color="activity.state ? '#409eff' : '#e6a23c'">
        <template v-if="activity.state">
          <ElCard>
            {{ activity.name }}
          </ElCard>
        </template>
        <template v-else>
          {{ activity.name }}
        </template>
      </el-timeline-item>
    </el-timeline>
  </div>

  <div style="padding: 0 20px;">
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="date" label="Date" width="180" />
      <el-table-column prop="name" label="Name" width="180" />
      <el-table-column prop="address" label="Address" />
    </el-table>
  </div>
</template>

<script lang="ts" setup>
const activities = [
  {
    name: '舱内配置',
    state: 1,
    stateName: '已经完成',
    operUserCode: "admin",
    operUserName: "管理员",
    finishTime: '2025-10-23 10:01:01',
  },
  {
    name: '成品复核',
    state: 1,
    stateName: '已经完成',
    finishTime: '2025-10-23 10:01:01',
  },
  {
    name: '叫号',
    state: 1,
    stateName: '已经完成',
    finishTime: '2025-10-23 10:01:01',
  },
  {
    name: '过号',
    state: 1,
    stateName: '已经完成',
    finishTime: '2025-10-23 10:01:01',
  },
  {
    name: '穿刺',
    state: 0,
    stateName: '未完成',
    finishTime: '',
  },
  {
    name: '换液',
    state: 0,
    stateName: '未完成',
    finishTime: '',
  },
  {
    name: '换液',
    state: 0,
    stateName: '未完成',
    finishTime: '',
  },
  {
    name: '拔针',
    state: 0,
    stateName: '未完成',
    finishTime: '',
  },
]

const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]
</script>
